<template>
    <div class="line-chart-test">
        <h1>LineChart 动态配置测试</h1>

        <div class="test-section">
            <h2>单指标折线图</h2>
            <LineChart :data="singleData" :series="singleSeries" title="单指标测试" :height="300" />
        </div>

        <div class="test-section">
            <h2>多指标折线图</h2>
            <LineChart :data="multiData" :series="multiSeries" title="多指标测试" :height="300" />
        </div>

        <div class="test-section">
            <h2>自定义坐标轴配置</h2>
            <LineChart :data="customAxisData" :series="customAxisSeries" :xAxis="customXAxis" :yAxis="customYAxis"
                title="自定义坐标轴" :height="300" />
        </div>

        <div class="test-section">
            <h2>自定义样式配置</h2>
            <LineChart :data="customStyleData" :series="customStyleSeries" title="自定义样式" :height="300"
                :showArea="true" />
        </div>

        <div class="test-section">
            <h2>动态数据更新</h2>
            <LineChart :data="dynamicData" :series="dynamicSeries" title="动态数据" :height="300" />
            <div class="controls">
                <el-button @click="addDynamicData">添加数据</el-button>
                <el-button @click="updateDynamicData">更新数据</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LineChart from '@/components/charts/LineChart.vue'

// 单指标数据
const singleData = ref([
    { name: '1月', value: 100 },
    { name: '2月', value: 200 },
    { name: '3月', value: 150 }
])

// 单指标系列配置
const singleSeries = ref([
    { key: 'value', name: '单指标数据', color: '#409eff' }
])

// 多指标数据
const multiData = ref([
    { name: '1月', pv: 100, uv: 80, uip: 60 },
    { name: '2月', pv: 200, uv: 150, uip: 120 },
    { name: '3月', pv: 150, uv: 120, uip: 90 }
])

// 多指标系列配置
const multiSeries = ref([
    { key: 'pv', name: '访问量(PV)', color: '#409eff', symbol: 'circle' },
    { key: 'uv', name: '访客数(UV)', color: '#67c23a', symbol: 'diamond' },
    { key: 'uip', name: 'IP数(UIP)', color: '#e6a23c', symbol: 'triangle' }
])

// 自定义坐标轴数据
const customAxisData = ref([
    { time: '00:00', temperature: 18, humidity: 65 },
    { time: '06:00', temperature: 22, humidity: 58 },
    { time: '12:00', temperature: 28, humidity: 45 },
    { time: '18:00', temperature: 25, humidity: 52 },
    { time: '24:00', temperature: 20, humidity: 62 }
])

// 自定义坐标轴系列配置
const customAxisSeries = ref([
    { key: 'temperature', name: '温度(°C)', color: '#f56c6c' },
    { key: 'humidity', name: '湿度(%)', color: '#67c23a' }
])

// 自定义横坐标配置
const customXAxis = ref({
    name: '时间',
    type: 'category',
    axisLabel: {
        rotate: 45,
        color: '#666'
    }
})

// 自定义纵坐标配置
const customYAxis = ref({
    name: '数值',
    type: 'value',
    min: 0,
    max: 100
})

// 自定义样式数据
const customStyleData = ref([
    { name: 'A', value: 100 },
    { name: 'B', value: 200 },
    { name: 'C', value: 150 },
    { name: 'D', value: 300 },
    { name: 'E', value: 250 }
])

// 自定义样式系列配置
const customStyleSeries = ref([
    {
        key: 'value',
        name: '自定义样式数据',
        color: '#9c27b0',
        lineStyle: { width: 5, type: 'dashed' },
        itemStyle: { borderWidth: 4 }
    }
])

// 动态数据
const dynamicData = ref([
    { name: '第1天', value: Math.floor(Math.random() * 100) },
    { name: '第2天', value: Math.floor(Math.random() * 100) },
    { name: '第3天', value: Math.floor(Math.random() * 100) }
])

// 动态系列配置
const dynamicSeries = ref([
    { key: 'value', name: '动态数据', color: '#ff9800' }
])

// 添加动态数据
const addDynamicData = () => {
    const newIndex = dynamicData.value.length + 1
    const newValue = Math.floor(Math.random() * 100)
    dynamicData.value.push({
        name: `第${newIndex}天`,
        value: newValue
    })
}

// 更新动态数据
const updateDynamicData = () => {
    dynamicData.value.forEach(item => {
        item.value = Math.floor(Math.random() * 100)
    })
}
</script>

<style scoped>
.line-chart-test {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
}

.test-section {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.test-section h2 {
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

.controls {
    margin-top: 16px;
    text-align: center;
}

.controls .el-button {
    margin: 0 8px;
}
</style>
